<template>
  <div class="person">
    <!-- 
      08 computed计算属性
     -->
    姓: <input type="text" v-model="firstName"> <br>
    名: <input type="text" v-model="lastName"> <br>
    全名: <span>{{ fullName }}</span>
    <button @click="changeFullname">修改全名</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, computed } from 'vue'
let firstName = ref('张')
let lastName = ref('三')

  // 计算属性有缓存, 方法没有缓存 
  // 这么定义的fullName是一个计算属性,且是只读的
  let fullName1 = computed(()=>{
    return firstName.value + '-' + lastName.value
  })

  // 可读可写
  let fullName = computed({
    get(){
      return firstName.value + '-' + lastName.value
    },
    set(val){
      console.log('set', val) // val-> li-si
      // firstName.value = val.split('-')[0]
      // lastName.value = val.split('-')[1]
      const [str1, str2] = val.split('-')
      firstName.value = str1
      lastName.value = str2
    }
  })

  const changeFullname = () => {
    fullName.value = 'li-si'
  }

</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>